import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, partOf} from '../../utils/common'

import './course.less'

import collection from '../../assets/img/icon_45.png'
import img_07 from '../../assets/img/img_07.jpg'
import none_people from "../../assets/img/noce_record.png";

// 建企商学院-详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Detail extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  state = {
    pageIndex:1,
    pageSize,
    items: [],
    totalCount: 0,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的课程' })
    this.getMyCourseInfo()
  }

  getMyCourseInfo() {
    let { userStore } = this.props.stores
    let { pageIndex,pageSize } = this.state
    userStore.getMyCourseInfo({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getMyCourseInfo()
      })
    }
  }

  render() {
    let { items } = this.state
    return (
     <View>
       {items.length>0&&
        items.map(item => {
          return(
            <View className='list-08-item' onClick={this.handelRouter.bind(this,'/pages/user/course_detail?id='+item.id)}>
              <Image className='item-img' src={item.courseLogoImg} />
              <View className='info'>
                <View className='title'>
                  {partOf(item.courseName,50)}
                </View>
                <View className='old-price' />
                <View className='price-wrap'>
                  <View className='price buy-course'>已购买课程
                    <Text className='big color-orange'> {item.buyCount} </Text>
                    节
                  </View>
                  <View className='num'>全部课程共 {item.courseCount} 节</View>
                </View>
              </View>
            </View>
          )
        })
       }
       {items.length<=0&&
       <View className='none-info'>
          <Image className='none-icon' src={none_people} />
          <Text className='none-title list-desc'>暂时还没有课程信息~</Text>
       </View>
       }
     </View>
    )
  }
}

export default Detail
